<!--
 * @Author: 1453937336@qq.com 1453937336@qq.com
 * @Date: 2024-04-18 18:37:23
 * @LastEditors: 1453937336@qq.com 1453937336@qq.com
 * @LastEditTime: 2024-07-08 12:32:32
 * @FilePath: \itforce-hris\src\pages\organization\components\unit-modal.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div>
    <a-modal v-model:open="open" :title="$t('Service Order')" @cancel="handleColse" :maskClosable="false">
      <a-form layout="vertical" :model="formState" ref="formRef" style="margin-top: 24px">
        <a-form-item :label="$t('名字')" name="name" :rules="[{ required: true, message: $t('请输入') }]">
          <a-input v-model:value="formState.name" />
        </a-form-item>
        <a-form-item :label="$t('编号')">
          <a-input v-model:value="formState.soNo" />
        </a-form-item>
        <a-form-item :label="$t('开始日期')" name="beginDate" :rules="[{ required: true, message: $t('请输入') }]">
          <a-date-picker :getPopupContainer="(triggerNode) => triggerNode.parentNode"
            v-model:value="formState.beginDate" valueFormat="YYYY-MM-DD" style="width: 100%" />
        </a-form-item>
        <a-form-item :label="$t('结束日期')" name="endDate" :rules="[{ required: true, message: $t('请输入') }]">
          <a-date-picker :getPopupContainer="(triggerNode) => triggerNode.parentNode" v-model:value="formState.endDate" valueFormat="YYYY-MM-DD" style="width: 100%" />
        </a-form-item>
        <a-form-item :label="$t('备注')">
          <a-textarea v-model:value="formState.remark" allow-clear />
        </a-form-item>
        <a-form-item :label="$t('状态')">
          <a-select :getPopupContainer="(triggerNode) => triggerNode.parentNode" ref="select" v-model:value="formState.status" :placeholder="$t('请选择')">
            <a-select-option :value="1">{{ $t("有效") }}</a-select-option>
            <a-select-option :value="0">{{ $t("无效") }}</a-select-option>
          </a-select>
        </a-form-item>
      </a-form>
      <template #footer>
        <a-button type="primary" :loading="loading" @click="handleOk">{{
          $t("保存")
        }}</a-button>
      </template>
    </a-modal>
  </div>
</template>
<script setup>
import moment from "moment";
import { useI18n } from "vue-i18n";
import { ref, reactive } from "vue";
import { Modal, message } from 'ant-design-vue';
import { GetOrganizationServiceOrderUuid, PostOrganizationServiceOrderAdd, PutOrganizationServiceOrderUuid } from "@/api/organization/index";
const { t: $t } = useI18n();
const emits = defineEmits(["refreshList"]);
const props = defineProps({})
const formState = ref({
  id: '',
  name: "",
  soNo: "",
  beginDate: "",
  endDate: "",
  remark: "",
  status: undefined
});
const loading = ref(false);
const open = ref(false);
const companyId = ref('')
const showModal = (id, record) => {
  open.value = true;
  companyId.value = id
  if (record?.id) {
    getEnterpriseInfo(record.uuid);
  }
};
const getEnterpriseInfo = async (uuid) => {
  const { data } = await GetOrganizationServiceOrderUuid(uuid);
  formState.value = cloneDeep(data);
};
const handleColse = () => {
  open.value = false;
  formRef.value.resetFields();
  formState.value = {};
};
const formRef = ref(null);
const handleOk = debounce(() => {
  if (
    moment(formState.value.endDate).format("YYYY-MM-DD") <
    moment(formState.value.beginDate).format("YYYY-MM-DD")
  ) {
    message.warning($t("结束日期不能小于开始日期"));
    return;
  }
  loading.value = true
  formRef.value.validate().then(() => {
    if (formState.value.id) {
      PutOrganizationServiceOrderUuid({
        ...formState.value,
        enterpriseId: companyId.value
      }).then(res => {
        loading.value = false
        message.success($t('操作成功'));
        handleColse()
        emits('refreshList')
      }).finally(() => {
        loading.value = false
      });
    } else {
      PostOrganizationServiceOrderAdd({
        ...formState.value,
        enterpriseId: companyId.value
      }).then(res => {
        loading.value = false
        message.success($t('操作成功'));
        handleColse()
        emits('refreshList')
      }).finally(() => {
        loading.value = false
      });
    }
  }).catch((error) => {
    loading.value = false
  })
}, 1000);
defineExpose({
  showModal
});
</script>
<style lang="scss" scoped>
::v-deep {
  .ant-form-item .ant-form-item-label>label.ant-form-item-required:not(.ant-form-item-required-mark-optional)::before {
    content: none;
  }
}
</style>
